<template>
  <div class="ezuikitplayer-wrapper">
    <div class="title">
      <span>设备名称: {{ deciveName }}</span>
      <span>设备型号: {{ deviceModel }}</span>
    </div>
    <div :id="id"></div>
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js'
export default {
  data() {
    return {
      id: null,
      player: null,
      deciveName: '',
      deviceModel: '',
    }
  },
  destroyed() {
    console.log('****播放器组件销毁****')
    this.player = null
    this.id = null
  },
  methods: {
    initPlayer(record) {
      if (record) {
        const { accessToken, url, id, name, deviceModel } = record
        this.id = '_player_' + id
        this.deciveName = name
        this.deviceModel = deviceModel
        this.player = new EZUIKit.EZUIKitPlayer({
          id: this.id, // 视频容器ID
          accessToken,
          url,
          template: 'pcLive',
          width: 800,
          height: 500,
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.ezuikitplayer-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  .title {
    margin: 15px;
    span {
      margin-right: 10px;
      font-size: 16px;
    }
  }
}
</style>